<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		navigateBack,
		redirectToMemorialHall,
	} from "@/assets/scripts/navigate.js"
	import {
		addOfferingListApi,
		getEverlastingLampApi,
	} from "@/assets/api/other/memorialHall.js"

	const meMemorialId = ref('')
	const popup = ref()
	const current = ref(0)
	const listCurrent = ref(0)
	const everlastingLampList = ref([])

	const list = [{
		value: '18',
		date: '7',
		label: '点亮七天',
	}, {
		value: '38',
		date: '30',
		label: '点亮一个月',
	}, {
		value: '88',
		date: '180',
		label: '点亮半年',
	}, {
		value: '168',
		date: '365',
		label: '点亮一年',
	}, {
		value: '288',
		date: '-1',
		label: '永久点亮',
	}]

	const handleLighting = async () => {
		popup.value.open()
	}

	const handleSubmit = async () => {
		const res = await addOfferingListApi({
			businessId: everlastingLampList.value[current.value].id,
			meMemorialId: meMemorialId.value,
			memorialValue: list[listCurrent.value].value,
			ocNum: list[listCurrent.value].value,
			ocTotay: list[listCurrent.value].date,
			olImg: everlastingLampList.value[current.value].elImg,
			olName: everlastingLampList.value[current.value].elName,
			olType: '点灯',
		})
		if (res.code === 200) {
			uni.showToast({
				title: "点灯成功",
				duration: 2000,
				complete: () => {
					setTimeout(() => {
						redirectToMemorialHall(meMemorialId.value, 1)
					}, 3000)
				}
			})
		} else {
			uni.showToast({
				title: '余额不足请充值!',
				icon: 'error',
			})
		}
	}

	onMounted(() => {
		route_init()
		everlastingLamp_init()
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
			meMemorialId.value = route.query.meMemorialId
		}
	}

	const everlastingLamp_init = async () => {
		const res = await getEverlastingLampApi()
		if (res.code === 200) {
			everlastingLampList.value = res.rows
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="点亮长明灯">
		</uv-navbar>

		<view class="px-normal mt-normal">
			请选择要点亮的长明灯
		</view>
		<view class="mt-small d-flex d-flex-fww box">
			<view class="d-flex d-flex-aic d-flex-jcc item" v-for="(item, index) in everlastingLampList" :key="index"
				@click="current=index">
				<view class="pic">
					<image :src="item.elImg" mode="widthFix" class="image image-fill-x"></image>
				</view>
				<view class="p-small flow-bottom" v-show="current===index">
					<view class="font-fs18">
						{{item.elName}}
					</view>
					<view class="font-fs14 text-ellipsis-2">
						寓意:{{item.elDesc}}
					</view>
				</view>
				<view class="flow-right-top" v-show="current===index">
					<uv-icon name="checkmark-circle-fill" size='20' color="#4caf50"></uv-icon>
				</view>
			</view>
		</view>

		<view class="height"></view>

		<uv-popup ref="popup" mode="bottom">
			<view class="popup-box">
				<view class="head">
					<view class="font-fs18 title">
						{{everlastingLampList[current].elName}}
					</view>
					<view class="close-btn" @click="popup.close()">
						关闭
					</view>
				</view>
				<view class="body">
					<view :class="['item',{'con':listCurrent===index}]" v-for="(item, index) in list" :key="index"
						@click="listCurrent=index">
						{{item.label}}({{item.value}}缅怀币)
						<view class="flow-right" v-show="listCurrent===index">
							<uv-icon name="checkmark-circle-fill" size='20' color="#d84444"></uv-icon>
						</view>
					</view>
				</view>

				<view class="foot" @click="handleSubmit">
					确认购买
				</view>
			</view>
		</uv-popup>


		<view class="px-normal submit-btn">
			<uv-button @click="handleLighting" type="success" text="点亮长明灯" color="#7f4e3f"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.submit-btn {
		position: fixed;
		bottom: 5px;
		left: 0;
		right: 0;
	}

	.box {
		padding: 15px;

		.item {
			position: relative;
			width: calc((100% - 15px) / 2);
			height: 220px;
			overflow: hidden;
			background-color: #3b1105;
			color: #fff;
			margin-right: 15px;
			margin-bottom: 15px;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.pic {
				width: 100%;
			}

			.flow-right-top {
				position: absolute;
				right: 5px;
				top: 5px;
			}

			.flow-bottom {
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}

	}

	.height {
		height: 45px;
	}

	.popup-box {
		.head {
			background-image: linear-gradient(#02c295, #3b9cfe, #1fafca);
			color: #fff;
			height: 40px;
			position: relative;

			.title {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				margin: auto;
				width: max-content;
			}

			.close-btn {
				border-radius: 10px;
				background-color: #d74444;
				width: 65px;
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				top: 0;
				bottom: 0;
				right: 20px;
				margin: auto;
				position: absolute;
			}
		}

		.body {

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				color: #666666;
				position: relative;
				border-bottom: 1px solid #ebebeb;

				.flow-right {
					position: absolute;
					right: 20px;
					top: 0;
					bottom: 0;
					margin: auto;
					height: max-content;
				}

				&.con {
					color: #d84444;
				}
			}
		}

		.foot {
			background-color: #d84444;
			color: #fff;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>